<template>
  <div class="import-record">
    <div class="app-main-content-box top">
      <!-- 头部标题 -->
      <div class="app-main-top-box">
        <div class="title">会员导入任务</div>
        <el-button round size="medium" @click="goBack">返 回</el-button>
      </div>

      <!-- Tips -->
      <div class="app-main-tips-box top-tips">
        <div class="title">
          <i class="el-icon-warning" /> 导入任务说明
        </div>
        <ul>
          <li>1.导入的任务数据最多保留 7 天。</li>
          <li>2.你只可以取消待执行的任务。</li>
          <li>3.如果任务有数据导入失败，请下载异常的Excel文件修改再重新上传。</li>
        </ul>
      </div>
    </div>

    <div class="app-main-content-box content">
      <!-- 表格内容 -->
      <div class="list-table">
        <el-table
          v-loading="tableLoading"
          :data="list"
          border
          stripe
          style="width: 100%"
          size="small"
          element-loading-text="加载中"
          empty-text="暂无数据"
        >
          <el-table-column prop="createTime" label="时间" fixed="left" />
          <el-table-column prop="originFile" label="文件名" />
          <el-table-column prop="status" label="执行状态">
            <template slot-scope="scope">
              <span>{{ statusOption[scope.row.status] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="执行完成时间" />
          <el-table-column prop="result" label="执行结果">
            <template v-if="scope.row.result" slot-scope="scope">
              <span>成功导入{{ JSON.parse(scope.row.result).successCounts }} 条数据，异常数据{{ JSON.parse(scope.row.result).errorCounts }} 条</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.errorDataFilePath"
                type="text"
                size="small"
                @click="downErrorData(scope.row.taskId)"
              >下载失败数据</el-button>
              <!-- <el-button
                type="text"
                size="small"
                @click="cancel(scope.$index, scope.row)"
              >取消任务</el-button>-->
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination-direction
          v-if="paginationConfig.total!==0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getVipImportTasks } from '@/api/vip'
export default {
  data() {
    return {
      // 配置
      paginationConfig: {
        // 分页配置
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      statusOption: ['执行中', '已完成', '执行失败'],
      resolve: null,
      reject: null,
      // 数据
      list: [],
      tableLoading: false // 表格loading
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    /**
       *  获取数据
       */
    // 获取导入任务数据
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      this.tableLoading = true
      const params = {}
      params.page = page
      params.pageSize = pageSize
      getVipImportTasks(params)
        .then(res => {
          this.tableLoading = false
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .catch(() => {
          this.tableLoading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

    /**
       * 按钮组
       */
    // 下载错误数据
    downErrorData(taskId) {
      const alink = document.createElement('a')
      alink.href =
          process.env.VUE_APP_BASE_API +
          '/memberAdmin/memberImport/downloadErrorData?taskId=' +
          taskId +
          '&X-BUSINESS-TOKEN=' +
          this.$store.state.user.token
      alink.download = ''
      alink.click()
    },

    // 取消任务
    cancel() {},

    // 返回
    goBack() {
      this.$emit('changeTabName', 'vipImport')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .import-record {
    .top {
      margin-bottom: 10px;
    }
  }
</style>
